<template>
  <el-dialog
    title="复制产品"
    class="copy-product"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :width="handleScreenWidthToVw(590)+'px'"
  >
    <div style="color: #D12D1F;" class="justify-center mg-bottom-10">
      <div style="width: 80%;" class="flex pd-lr-20">
        <i class="el-icon-warning fz-16 mg-right-20 "/>
        <div>提交后将为新的产品赋予与当前已选产品相同的产品说明和物模型</div>
      </div>
    </div>
    <div class="justify-center">
      <el-form ref="form" :model="formData" label-width="100px" label-suffix="：" :rules="rules">
        <el-form-item label="选择产品" prop="copyProductId">
          <el-select
            class="input"
            v-model="formData.copyProductId"
            filterable
            remote
            reserve-keyword
            clearable
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="selectorLoading"
            @change="handleSelectProduct"
          >
            <el-option
              v-for="product in productList"
              :key="product.id"
              :label="product.name"
              :value="product.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input class="input" v-model="formData.name" maxlength="10" placeholder="请输入产品名称"/>
        </el-form-item>
        <el-form-item label="发布状态" prop="publishState">
          <div class="flex">
            <PublishStateSwitch v-model="formData.publishState"/>
            <span class="pd-left-4">{{ formData.publishState|PublishStateMap }}</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="justify-center">
      <el-button v-loading="loading" type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { apiAddProduct, apiFindProductList } from '@/views/device/create-product/api'
import PublishStateSwitch from './publish-state-switch'
import { constUtils } from '../../mixin'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  name: 'CopyProduct',
  components: { PublishStateSwitch },
  mixins: [constUtils],
  props: {
    visible: Boolean
  },
  data() {
    return {
      productList: [],
      formData: {},
      loading: false,
      selectorLoading: false
    }
  },
  computed: {
    handleScreenWidthToVw: () => handleScreenWidthToVw,
    rules() {
      return {
        copyProductId: [{ required: true, message: '产品不能为空！', trigger: 'change' }],
        name: [{ required: true, message: '产品名称不能为空！', trigger: 'blur' }, {
          required: true,
          message: '产品名称不能超过10个字符',
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (value.length > 10) {
              callback('产品名称不能超过10个字符')
            }
          }
        }],
        publishState: [{ required: true, message: '发布状态不能为空！', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.findProductList()
      this.formData = {
        copyProductId: '',
        name: '',
        publishState: this.PublishState.UNPUBLICSHED
      }
    },
    async remoteMethod(query) {
      if (query === '') {
        this.productList = []
      } else {
        await this.findProductList(query)
      }
    },
    handleClose() {
      this.formData = {
        copyProductId: '',
        name: '',
        publishState: this.PublishState.UNPUBLICSHED
      }
      this.$refs.form.resetFields()
      this.$emit('update:visible', false)
    },
    async addProduct() {
      this.loading = true
      try {
        this.formData.id = ''
        await apiAddProduct(this.formData)
        this.$message.success('添加成功')
        this.$emit('change')
        this.handleClose()
      } catch (e) {
        this.$message.error(e)
      }
      this.loading = false
    },
    async handleSubmit() {
      await this.$refs.form.validate()
      try {
        await this.addProduct()
        this.$emit('change')
        this.handleClose()
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleSelectProduct(productId) {
      this.formData = {
        ...(this.productList.find(product => product.id === productId) || { name: '' }),
        copyProductId: productId
      }
      if (this.formData.name) {
        this.formData.name += '_copy'
      }
    },
    async findProductList(keyword) {
      this.productList = await apiFindProductList(keyword)
    }
  }
}
</script>

<style scoped lang="scss">
.input {
  width: vw(350px);
}
</style>
